<script setup lang='ts'>
import {ref, computed} from 'vue'
import type {Ref, ComputedRef} from 'vue'
import {useRouter} from 'vue-router'
import type {Router} from 'vue-router'
import {getCheckPhone} from '../../api/user'
import { showToast,showConfirmDialog } from 'vant';
const router: Router = useRouter()

const tel: Ref<string> = ref('')

const flag: ComputedRef<boolean> = computed(()=>{
  if(/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(tel.value)){
    // 手机号合法
    return false
  }else {
    // 手机号不合法
    return true
  }
})

function onSubmit(){
  // 发送数据请求验证手机号是否被注册过
    getCheckPhone({
      tel: tel.value
    }).then(res => {
      // console.log(res.data);
      if(res.data.code == 200){

        // 将手机号做本地保存，下一页面和下下页面都需要使用
        sessionStorage.setItem('tel', tel.value)

        // 如果没有被注册我们可以进入下一页面，否则就提示进入登录页面
        router.push('/register/step2')
      }else {
        // showToast(res.data.message)
        showConfirmDialog({
          title: '温馨提示',
          confirmButtonText: '去登录',
          message:
            res.data.message,
        })
          .then(() => {
            // on confirm
            router.push('/login')
          })
          .catch(() => {
            // on cancel
          });
      }
    })


  
}

</script>
<template>
   

      <div class='content' style="padding-top: 30px;" >
        <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-field
            v-model="tel"
            name="手机号"
            label="手机号"
            placeholder="请输入手机号"
            :rules="[{ required: true, pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/, message: '请正确填写11位手机号' }]"
          />
        </van-cell-group>

        <div style="padding: 30px 20px 0 20px;">
          <van-button :disabled='flag' native-type="submit" round block color='#f66' >
            下一步
          </van-button>
        </div>
        
      </van-form>



        


      </div>

</template>
<style scoped lang="scss">
    
</style>